<template>
  <view
    class="swiper-delete-wrapper"
    @touchmove="touchMoveHandler"
    @touchstart="touchStartHandler"
    :style="'transform:translateX(' + translateX + 'rpx)'"
  >
    <slot></slot>
    <view class="swipe-delete-btn" @tap="deleteItem">删除</view>
  </view>
</template>
<script setup>
import { ref } from 'vue';

let startX = 0;
const $emits = defineEmits(['deleteGoodItem']);
const translateX = ref(0);
const deleteItem = (e) => {
  translateX.value = 0;
  $emits(
    'deleteGoodItem',
    {},
    {
      bubbles: true,
    }
  );
};
/**
 * 滑动删除事件-滑动开始
 */
const touchStartHandler = (e) => {
  startX = e.touches[0].pageX;
};
/**
 * 滑动删除事件-滑动
 */
const touchMoveHandler = (e) => {
  let pageX = e.touches[0].pageX;
  let moveX = pageX - startX;
  if (Math.abs(moveX) < 80) {
    return;
  }

  if (moveX > 0) {
    // 右滑 隐藏删除
    if (Math.abs(translateX.value) == 0) {
      return;
    } else {
      translateX.value = 0;
    }
  } else {
    // 左滑 显示删除
    if (Math.abs(translateX.value) >= 160) {
      return;
    } else {
      translateX.value = -160;
    }
  }
};
</script>
<style lang="scss" scoped>
  .swiper-delete-wrapper {
    transition: all .4s ease;
    position: relative;
  }
  .swipe-delete-btn {
    position: absolute;
    right: -160rpx;
    top: 0;
    background-color: #000000;
    width: 160rpx;
    height: 100%;
    text-align: center;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>
